<template>
  <!-- 页面根容器：控制背景色和整体高度 -->
  <view class="invite-page" >
    <image class="bg-img" src="/static/教育培训机构积分兑换活动规则介绍长图海报-2@1x.png"  mode="aspectFill"  />
    <!-- 顶部 banner 区 -->
    <view class="banner">
      <!-- <image class="banner-bg" src="/static/invite-banner-bg.png" mode="widthFix" /> -->
      <!-- <text class="banner-title">邀请好友享权益</text> -->
      <image src="/static/邀请好友享权益@1x.png" style="width: 306px; height: 53px;"></image>
    </view>

    <!-- 邀请码核心区 -->
    <view class="invite-code-card">
      <!-- 标题行 -->
      <text class="invite-code-title">我的专属邀请码 (已邀请3人)</text>
      <!-- 邀请码+按钮行 -->
      <view class="invite-code-row">
        <text class="invite-code">A2347453</text>
        <view class="copy-share-btn">复制并分享</view>
      </view>
      <!-- 说明文字 -->
      <text class="invite-code-desc">将专属邀请码发送给好友，好友输入邀请码，可确保权益到账</text>
      <!-- 输入好友邀请码区 -->
      <view class="friend-code-row">
        <text class="friend-code-label">输入好友邀请码</text>
        <input class="friend-code-input" placeholder="请输入" />
        <view class="confirm-btn">确定</view>
      </view>
    </view>

    <!-- 权益说明区 -->
    <view class="benefit-card">
      <view class="benefit-title">🎁 邀请好友享受两大权益</view>
      
      <!-- 权益1 -->
      <view class="benefit-item">
        <view class="benefit-subtitle">权益一</view>
        <text class="benefit-content">1. 发布者/制作者均可提取下属人员交易金额的1%</text>
      </view>
      <!-- 权益2 -->
      <view class="benefit-item">
        <view class="benefit-subtitle">权益二</view>
        <text class="benefit-content">1. 邀请5位以上制作者且被邀请人完成5单以上交易，技术服务费降为4%</text>
        <text class="benefit-content">2. 邀请10位以上接单者且被邀请人完成10单以上交易，技术服务费降为3%</text>
        <text class="benefit-content">3. 邀请15位以上接单者且被邀请人完成15单以上交易，技术服务费降为2%</text>
      </view>
    </view>

    <!-- 已邀请好友列表 -->
    <view class="invited-friends-card">
      <text class="invited-title">已邀请好友</text>
      <!-- 好友列表（循环渲染，这里模拟3条数据） -->
      <view class="friend-item" v-for="(item, index) in friendList" :key="index">
        <image class="friend-avatar" src="/static/friend-avatar.png" mode="aspectFit" />
        <view class="friend-info">
          <text class="friend-nickname">昵称</text>
          <text class="friend-time">2025-07-06 12:12:12</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
// 模拟已邀请好友列表数据
const friendList = ref([{}, {}, {}]);

// 复制邀请码逻辑（示例）
const handleCopy = () => {
  uni.setClipboardData({
    data: 'A2347453',
    success: () => {
      uni.showToast({ title: '复制成功', icon: 'success' });
    }
  });
};
</script>

<style scoped> 
/* 页面根容器：背景色、整体高度 */
.invite-page {
  position: relative;
  min-height: 100vh;
  padding: 0 20rpx;
}
/* 背景图铺满全屏 */
.bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* 顶部 banner 区 */
.banner {
  position: relative;
  width: 100%;
  padding-top: 94px;
  margin-bottom: 230rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index:1;
}
.banner-bg {
  width: 100%;
}
.banner-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48rpx;
  font-weight: bold;
  color: #fff;
  text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.2);
}

/* 邀请码卡片：白色背景、圆角、阴影 */
.invite-code-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}
.invite-code-title {
  font-size: 28rpx;
  color: #00bfa5; /* 绿色标题 */
  margin-bottom: 20rpx;
}
.invite-code-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
}
.invite-code {
  background-color: #e6f7ef;
  padding: 16rpx 24rpx;
  border-radius: 8rpx;
  font-size: 32rpx;
  color: #00bfa5;
}
.copy-share-btn {
  background-color: #00bfa5;
  color: #fff;
  width: 95px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  border-radius: 8rpx;
  padding: 10rpx;
  box-sizing: border-box;
  font-size: 15px;
  font-weight: 500;
  line-height: 170%;
}
.invite-code-desc {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 24rpx;
  line-height: 36rpx;
}
.friend-code-row {
  display: flex;
  align-items: center;
  gap: 20rpx;
}
.friend-code-label {
  font-size: 28rpx;
  color: #00bfa5;
  margin-right: 16rpx;
}
.friend-code-input {
  flex: 1;
  height: 64rpx;
  border: 1px solid #e6f7ef;
  border-radius: 8rpx;
  padding: 0 16rpx;
  background-color: #e6f7ef;
}
.confirm-btn {
  background-color: #00bfa5;
  color: #fff;
  border-radius: 8rpx;
  padding: 10rpx;
  font-size: 30rpx;
  box-sizing: border-box;
}

/* 权益卡片 */
.benefit-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}
.benefit-title {
  font-size: 32rpx;
  color: #00bfa5;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 24rpx;
}
.benefit-item {
  background-color: #e6f7ef;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}
.benefit-subtitle {
  
  font-size: 28rpx;
  color: #00bfa5;
  text-align: center;
  margin-bottom: 16rpx;
  position: relative;
}
.benefit-subtitle::before,
.benefit-subtitle::after {
  content: "~~";
  color: #ffcc80; /* 橙色波浪线 */
  margin: 0 8rpx;
}
.benefit-content {
  font-size: 24rpx;
  color: #333;
  margin-bottom: 12rpx;
  line-height: 36rpx;
}

/* 已邀请好友卡片 */
.invited-friends-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}
.invited-title {
  font-size: 32rpx;
  color: #00bfa5;
  text-align: center;
  margin-bottom: 24rpx;
  position: relative;
}
.invited-title::before,
.invited-title::after {
  content: "~~";
  color: #ffcc80;
  margin: 0 8rpx;
}
.friend-item {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
}
.friend-avatar {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  margin-right: 16rpx;
}
.friend-info {
  flex: 1;
}
.friend-nickname {
  font-size: 28rpx;
  color: #333;
}
.friend-time {
  font-size: 22rpx;
  color: #999;
}

/* 底部 tabbar（视觉还原，实际需 pages.json 配置） */
.tabbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
  height: 120rpx;
  border-top: 1px solid #eee;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tab-icon {
  font-size: 36rpx;
  color: #999;
}
.tab-text {
  font-size: 22rpx;
  color: #999;
}
.tab-item.active .tab-icon,
.tab-item.active .tab-text {
  color: #00bfa5;
}
</style>